<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>厂商服务商列表</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="{{asset('/layuiadmin/layui/css/layui.css')}}" media="all">
    <link rel="stylesheet" href="{{asset('/layuiadmin/style/admin.css')}}" media="all">
    <style>
        .edit{background-color: #ed9c3a;}
        .shenhe{background-color: #429488;}
        .see{background-color: #7cb717;}
        .cur{color:#009688;}
        .del {background-color: #e85052;}    /*.laytable-cell-1-school_icon{height:100%;}*/
        input::-webkit-outer-spin-button,
        input::-webkit-inner-spin-button {
            -webkit-appearance: none;
        }
        input[type="number"]{
            -moz-appearance: textfield;
        }
        .view_qr{background-color: #4fd9e0;}
        #code{width: 190px;margin-right:10px;height: 190px;margin-right:10px;margin: 20px auto;}
        #codeimg{width: 100%;}
    </style>
</head>
<body>

<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-fluid">
                <div class="layui-row layui-col-space15">
                    <div class="layui-col-md12" style="margin-top:0px">
                        <div class="layui-card">
                            <div class="layui-card-header">厂商服务商列表</div>
                            <div class="layui-card-body">
                                <div class="layui-btn-container" style="font-size:14px;">
                                    <a class="layui-btn layui-btn-primary builddevice" style="background-color:#3475c3;border-radius: 5px;border:none;color:#fff;margin-top: 5px;">添加服务商</a>
                                    <!-- 审核状态 -->
                                    <div class="layui-form" lay-filter="component-form-group" style="display: inline-block;">
                                        <div class="layui-form-item" style="display: inline-block;">       
                                            <div class="layui-inline">                   
                                                <div class="layui-input-inline" style="width:350px">
                                                    <label class="layui-form-label">服务商名称</label>
                                                    <div class="layui-input-block">
                                                    <input type="text" style="border-radius:5px" name="deviceno" placeholder="请输入设备编号" autocomplete="off" class="layui-input">
                                                </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="layui-inline" style="display: inline-block;">
                                            <button class="layui-btn layuiadmin-btn-list" lay-submit="" lay-filter="LAY-app-contlist-search" style="border-radius:5px;margin-top:-5px;margin-bottom: 0;height:36px;line-height: 36px;">
                                                <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
                                            </button>
                                        </div>
                                    </div>
                                </div>

                                <table class="layui-hide" id="test-table-page" lay-filter="test-table-page"></table>
                                <script type="text/html" id="statusTpl">
                                    @{{#  if(d.is_auth == 1){ }}
                                    <span>已授权</span>
                                    @{{#  } else { }}
                                    <span class="cur">未授权</span>
                                    @{{#  } }}
                                </script>

                                <script type="text/html" id="table-content-list">
                                    
                                    @{{#  if(d.is_auth !== 1){ }}
                                    <a class="layui-btn layui-btn-xs bind" lay-event="bind" style="border-radius:3.5px;">授权</a>
                                    @{{#  } }}
                                    <a class="layui-btn layui-btn-normal layui-btn-xs devicelist" lay-event="devicelist" style="border-radius:3.5px;">设备列表</a>
                                    <a class="layui-btn layui-btn-normal layui-btn-xs update" lay-event="update" style="border-radius:3.5px;background-color: #FFB800;">编辑</a>
                                    <a class="layui-btn layui-btn-danger layui-btn-xs delbtn" lay-event="delbtn" style="border-radius:3.5px;">删除</a>
                                    </script>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div id="add_rate" class="hide" style="display: none;background-color: #fff;">
    <div class="layui-card-body" style="padding: 15px;">
        <div class="layui-form">
            <div class="layui-form-item">
                <label class="layui-form-label">服务商名称:</label>
                <div class="layui-input-block">
                    <input type="text" placeholder="请输入服务商名称" class="layui-input name">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">服务商PID:</label>
                <div class="layui-input-block">
                    <input type="text" placeholder="请输入服务商PID" class="layui-input pid">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">服务商应用ID:</label>
                <div class="layui-input-block">
                    <input type="text" placeholder="请输入服务商应用ID" class="layui-input app_id">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <div class="layui-footer" style="left: 0;">
                        <button class="layui-btn submit" style="border-radius:5px;margin-top:20px;margin-left:30%">确定</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div id="edit_rate" class="hide" style="display: none;background-color: #fff;">
    <div class="layui-card-body" style="padding: 15px;">
        <div class="layui-form">
            <div class="layui-form-item">
                <label class="layui-form-label">服务商名称:</label>
                <div class="layui-input-block">
                    <input type="text" placeholder="请输入服务商名称" class="layui-input name">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">服务商PID:</label>
                <div class="layui-input-block">
                    <input type="text" placeholder="请输入服务商PID" class="layui-input pid">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">服务商应用ID:</label>
                <div class="layui-input-block">
                    <input type="text" placeholder="请输入服务商应用ID" class="layui-input app_id">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <div class="layui-footer" style="left: 0;">
                        <button class="layui-btn submitEdit" style="border-radius:5px;margin-top:20px;margin-left:30%">确定</button>
                    </div>
                </div>
            </div>
            <input type="hidden" id="id">
        </div>
    </div>
</div>
<div id="view_qr" class="hide" style="display: none;background-color: #fff;">
    <div class="layui-card-body" style="padding: 15px;">
        <div class="layui-form">
            <div class="layui-form-item">
                <div style="display:flex;color: black;font-size: 16px;text-align: center;">
                    <div>服务商名称：</div>
                    <div class="workername"></div>
                </div>
                <div id="code"><img id="codeimg" src="" /> </div>
            </div>
        </div>
    </div>
</div>
<!-- 显示设备列表 -->
<div id="openDevicelist" style="display: none; background-color: #fff;">
	<div style="margin: 10px 20px;display:flex;color: black;font-size: 16px;text-align: center;">
		<span>服务商名称：</span>
		<div class="workername"></div>
	</div>
    <div style="margin: 0 20px;">
    <table id="openlistTable" lay-filter="openlistTable"></table>
    <script type="text/html" id="statusTemp">
        @{{#  if(d.status == 1){ }}
        <span>已绑定</span>
        @{{#  } else { }}
        <span class="cur">未绑定</span>
        @{{#  } }}
    </script>
    </div>
</div>

<script src="{{asset('/layuiadmin/layui/layui.js')}}"></script>
<script src="{{asset('/layuiadmin/layui/jquery-2.1.4.js')}}"></script>
<script>
    var token = localStorage.getItem("Usertoken");
    layui.config({
        base: '../../layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index','form', 'table','laydate'], function(){
        var $ = layui.$
            ,admin = layui.admin
            ,table = layui.table
            ,form = layui.form
            ,laydate = layui.laydate;

        // 未登录,跳转登录页面
        $(document).ready(function(){
            if(token==null){
                window.location.href="{{url('/user/login')}}";
            }
        });

        table.render({
            elem: '#test-table-page'
            ,url: "{{url('/api/v2/Lite/Provider/listProvider')}}"
            ,method: 'get'
            ,where:{
                token:token,
            }
            ,request:{
                pageName: 'page',
                limitName: 'pagesize'
            }
            ,page: true
            ,cellMinWidth: 150
            ,cols: [[
                {field: 'id', title: 'id'}
                ,{field: 'name',  title: '服务商名称'}
                ,{field: 'pid',  title: '支付宝PID'}
                ,{field: 'app_id',  title: '支付宝应用ID'}
                ,{field: 'is_auth',  title: '是否授权',templet: '#statusTpl'}
                ,{field: 'created_at',  title: '生成时间'}
                ,{width: 250, align:'center', fixed: 'right', toolbar: '#table-content-list',title: '操作'}
            ]]
            ,response: {
                statusName: 'status' //数据状态的字段名称，默认：code
                ,statusCode: 1 //成功的状态码，默认：0
                ,msgName: 'message' //状态信息的字段名称，默认：msg
                ,countName: 'total' //数据总数的字段名称，默认：count
                ,dataName: 'data' //数据列表的字段名称，默认：data
            }
            ,done: function(res, curr, count){
//          console.log(res);
                $('th').css({'font-weight': 'bold', 'font-size': '15','color': 'black','background':'linear-gradient(#f2f2f2,#cfcfcf)'});	//进行表头样式设置
            }
        });

        table.on('tool(test-table-page)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
            var e = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的DOM对象
            //          console.log(e);

            if(layEvent === 'update'){
                $('#edit_rate .name').val(e.name);
                $('#edit_rate .pid').val(e.pid);
                $('#edit_rate .app_id').val(e.app_id);
                $('#edit_rate #id').val(e.id);
                layer.open({
                    type: 1,
                    title: '编辑',
                    closeBtn: 0,
                    area: '516px',
                    skin: 'layui-layer-nobg', //没有背景色
                    shadeClose: true,
                    content: $('#edit_rate')
                });
            }else if(layEvent === 'delbtn'){
                layer.confirm('确定删除此条信息吗?', function(index){
                $.ajax({
                    url : "{{url('/api/v2/Lite/Provider/delProvider')}}",
                    data : {token:token,provider_id:e.id},
                    type : 'post',
                    dataType:"json",
                    success : function(data) {
                        console.log(data);
                        if(data.status==1){
                            obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                            layer.close(index);
                            layer.msg('删除成功!', {
                            offset: '50px'
                            ,icon: 1
                            ,time: 1000
                            }); 
                        }else{
                            layer.msg(data.message, {
                            offset: '50px'
                            ,icon: 2
                            ,time: 3000
                        });
                    }
                    
                    },
                    error : function(data) {
                        layer.msg(data.message, {
                            offset: '50px'
                            ,icon: 2
                            ,time: 3000
                        });
                    }
                });

                });
            }else if(layEvent === 'bind'){
                $.ajax({
                    url : "{{url('/api/v2/Lite/Oauth/appAuth')}}",
                    data : {token:token,provider_id:e.id},
                    type : 'get',
                    dataType:"json",
                    success : function(data) {
                        console.log(data);
                        if(data.status==1){
                            $('#view_qr .workername').html(e.name);
                            let urls = data.data.path.replace(/http:\/\//i, 'https://');
                            $('#codeimg').attr('src',urls)
                            // $('#code').qrcode(e.path);
                            layer.open({
                                type: 1,
                                title: '授权二维码',
                                closeBtn: 0,
                                area: '516px',
                                skin: 'layui-layer-nobg', //没有背景色
                                shadeClose: true,
                                content: $('#view_qr'),
                                end: function(){
                                    //执行重载
                                    table.reload('test-table-page', {
                                        page: {
                                            curr: 1
                                        },
                                        where: {
                                        }
                                    });
                                }
                            });
                        }else{

                            layer.msg(data.message, {
                            offset: '50px'
                            ,icon: 2
                            ,time: 3000
                        });
                    }
                    
                    },
                    error : function(data) {
                        layer.msg(data.message, {
                            offset: '50px'
                            ,icon: 2
                            ,time: 3000
                        });
                    }
                });
            }else if(layEvent === 'devicelist'){
                $('#openDevicelist .workername').html(e.name);
                table.render({
                    elem: '#openlistTable'
                    ,height:480
                    ,url: "{{url('/api/v2/Lite/Device/deviceList')}}"
                    ,method: 'get'
                    ,where:{
                        token:token,
                        provider_id:e.id,
                        cur:1
                    }
                    ,request:{
                        pageName: 'page',
                        limitName: 'pagesize'
                    }
                    ,page: true
                    ,cols: [[
                        {field: 'id', title: 'id',width:120}
                        ,{field: 'store_id',  title: '门店ID',width:170}
                        ,{field: 'device_no',  title: '设备编号',width:160}
                        ,{field: 'device_name',  title: '设备名称',width:170}
                        ,{field: 'smid',  title: '商户号',width:150}
                        ,{field: 'status',  title: '状态',templet: '#statusTemp',width:100}
                    ]]
                    ,response: {
                        statusName: 'status' //数据状态的字段名称，默认：code
                        ,statusCode: 1 //成功的状态码，默认：0
                        ,msgName: 'message' //状态信息的字段名称，默认：msg
                        ,countName: 'total' //数据总数的字段名称，默认：count
                        ,dataName: 'data' //数据列表的字段名称，默认：data
                    }
                    ,done: function(res, curr, count){
        //          console.log(res);
                        $('th').css({'font-weight': 'bold', 'font-size': '15','color': 'black','background':'linear-gradient(#f2f2f2,#cfcfcf)'});	//进行表头样式设置
                    }
                });
                layer.open({
                    type: 1,
                    title: '设备列表',
                    closeBtn: 0,
                    area: '920px',
                    shadeClose: true,
                    content: $('#openDevicelist')
                });
            }
            });

        // 选择审核状态
        form.on('select(status)', function(data){
          var type = data.value;
          
          //执行重载
          table.reload('test-table-page', {
            where: { 
              status:type
            }
            ,page: {
              curr: 1 //重新从第 1 页开始
            }
          });
        });

         //监听搜索
        form.on('submit(LAY-app-contlist-search)', function(data){
            var proname = data.field.name;
            //console.log(data);
            //执行重载
            table.reload('test-table-page', {
                page: {
                    curr: 1
                },
                where: {
                    name:proname
                }
            });
        });
       
        $('.builddevice').click(function(){
            $('#add_rate .name').val('');
            $('#add_rate .pid').val('');
            $('#add_rate .app_id').val('');
            layer.open({
                type: 1,
                title: '添加',
                closeBtn: 0,
                area: '516px',
                skin: 'layui-layer-nobg', //没有背景色
                shadeClose: true,
                content: $('#add_rate')
            });
        });

        $('.submit').click(function(){
            var index = layer.load(2);
            $.post("{{url('/api/v2/Lite/Provider/addProvider')}}",
                {
                    token:token
                    ,name:$('#add_rate .name').val()
                    ,pid:$('#add_rate .pid').val()
                    ,app_id:$('#add_rate .app_id').val()
                },
                function(res){
                    //console.log(res);
                    layer.close(index);

                    if(res.status==1){
                        layer.msg('提交成功', {
                            offset: '50px'
                            ,icon: 1
                            ,time: 2000
                        },function(){
                            layer.closeAll();
                           //执行重载
                            table.reload('test-table-page', {
                                page: {
                                    curr: 1
                                },
                                where: {
                                }
                            });
                        });
                    }else{
                        layer.msg(res.message, {
                            offset: '50px'
                            ,icon: 2
                            ,time: 3000
                        });
                    }
                },"json");
        })
        // 编辑
        $('.submitEdit').click(function(){
            console.log(22222)
            var index = layer.load(2);
            $.ajax({
                url : "{{url('/api/v2/Lite/Provider/upProvider')}}",
                data : {
                    token:token
                    ,provider_id:$('#edit_rate #id').val()
                    ,name:$('#edit_rate .name').val()
                    ,pid:$('#edit_rate .pid').val()
                    ,app_id:$('#edit_rate .app_id').val()
                },
                type : 'post',
                dataType:'json',
                success : function(res) {
                    layer.close(index);
                    console.log(res,'res----')
                    if(res.status==1){
                        layer.msg('提交成功', {
                            offset: '50px'
                            ,icon: 1
                            ,time: 2000
                        },function(){
                            layer.closeAll();
                           //执行重载
                            table.reload('test-table-page', {
                                page: {
                                },
                                where: {
                                }
                            });
                        });
                    }else{
                        layer.msg(res.message, {
                            offset: '50px'
                            ,icon: 2
                            ,time: 3000
                        });
                    }
                },
                error : function(data) {
                    alert('查找板块报错');
                }
            });
        })
    });

</script>

</body>
</html>
